<template>
  <el-dialog title="导入：模块名称" width="600px" @close="closeDialog">

    <!-- 这是导入模块 -->
    <CustomImport :imageSrc="imageSrc" :uploadAction="uploadAction" :downloadTemplate="downloadTemplate"
      :handleUploadChange="handleUploadChange" :beforeUpload="beforeUpload" />

    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirmUpload">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, defineProps, defineEmits } from 'vue';
import CustomImport from '@/components/ImportExport/CustomImport.vue';

const props = defineProps<{
  dialogVisible: boolean;
}>();

const emits = defineEmits<{
  (event: 'close'): void;
}>();


const selectedItems = ref<string[]>([]);
const imageSrc = '../../../../assets/images/excel.png';
const uploadAction = 'https://jsonplaceholder.typicode.com/posts/';

const closeDialog = () => {
  emits('close'); // 发出 'close' 事件
};

const confirmUpload = () => {
  console.log("已选择的项目:", selectedItems.value);
};

const downloadTemplate = () => {
  const link = document.createElement('a');
  link.href = '/path/to/template.xlsx'; // 模板文件路径
  link.download = 'template.xlsx'; // 模板文件名称
  link.click();
};

const handleUploadChange = (file: File) => {
  console.log("上传文件:", file);
};

const beforeUpload = (file: File) => {
  const isExcel = /\.(xls|xlsx)$/.test(file.name);
  if (!isExcel) {
    // 提示用户
    ElMessage.error('上传文件只能是 Excel 格式!');
  }
  return isExcel;
};
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: center;
}
</style>
